<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <el-image
          src="/src/assets/img/log1.png"
          style="width: 200px; height: 50px"
          lazy
          fit="contain"
        >
        </el-image>
        <p class="title2">主菜单</p>
        <!-- menu菜单 -->
        <el-menu
          default-active="/article/channel"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          @open="handleOpen"
          @close="handleClose"
          router
        >
          <el-menu-item index="/1-sjgl">
            <el-icon><Avatar /></el-icon>
            <template #title>数据橄榄</template>
          </el-menu-item>
          <el-menu-item index="/2-hxrgl">
            <el-icon><ChatDotSquare /></el-icon>
            <span>候选人管理</span>
          </el-menu-item>
          <el-sub-menu index="/3-tkgl">
            <template #title>
              <el-icon><QuestionFilled /></el-icon>
              <span>题库管理</span>
            </template>
            <el-menu-item index="/a-tmflgl">
              <template #title>题目分类管理</template>
            </el-menu-item>
            <el-menu-item index="/b-tmjgl">
              <template #title>题目集管理</template>
            </el-menu-item>
            <el-menu-item index="/c-tmgl">
              <template #title>题目管理</template>
            </el-menu-item>
          </el-sub-menu>

          <el-menu-item index="/4-msjl">
            <el-icon><ChatDotSquare /></el-icon>
            <span>面试记录</span>
          </el-menu-item>
          <el-menu-item index="/5-msap">
            <el-icon><Menu /></el-icon>
            <span>面试安排</span>
          </el-menu-item>

          <el-menu-item index="/6-zwgl">
            <el-icon><Suitcase /></el-icon>
            <span>职位管理</span>
          </el-menu-item>

          <el-menu-item index="/7-msggl">
            <el-icon><Suitcase /></el-icon>
            <span>面试管管理</span>
          </el-menu-item>

          <p class="title2">系统</p>
          <el-menu-item index="/8-xtsz">
            <el-icon><Setting /></el-icon>
            <span>系统管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <el-container>
            <el-header>
              <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                :ellipsis="false"
                @select="handleSelect"
                router
              >
                <el-menu-item index="0">
                  <div class="input-group">
                    <el-input v-model="input" style="width: 240px" placeholder="搜索" />
                  </div>
                </el-menu-item>
                <el-sub-menu index="2">
                  <template #title>
                    <img
                      style="width: 50px"
                      src="/src/assets/img/tx.png"
                      alt="Element logo"
                      class="tx-img"
                    />
                    <div class="mm">
                      <span class="title">张经理</span>
                      <span class="mm-title">管理员</span>
                    </div>
                  </template>
                </el-sub-menu>
              </el-menu>
            </el-header>
            <el-main class="bg-hui">
              <router-view></router-view>
            </el-main>
          </el-container>
        </el-header>
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
// 引入pinia
import { useUserStore } from '@/stores/userStore'
// 引入router
import { useRouter, RouterView } from 'vue-router'
const router = useRouter()
// import { UserFilled, Crop, EditPen, CircleClose } from '@element-plus/icons-vue'
const userStore = useUserStore()
import { storeToRefs } from 'pinia'
const { userInfo } = storeToRefs(userStore)
const fit = ref('fill')
const url = 'https://fe-bigevent-web.itheima.net/assets/logo-d154372c.png'

// top下拉菜单
const user_pic = ref(userStore.userInfo.user_pic)
// 退出登录
const logout = () => {
  userStore.saveUserInfo({ token: '' })
  router.push('/login')
}
</script>

<style scoped>
.mm {
  width: 70px;
  height: 60px;
  display: flex;
  flex-wrap: wrap;
  align-self: start;
  /* background-color: aquamarine; */
  font-size: 14px;
  margin-left: 20px;
}
.mm-title {
  margin-top: -30px;
}
.title {
  margin-top: -10px;
}
.input-group {
  margin-top: -30px;
}

.el-menu-item * {
  border-radius: 30px;
}

.el-aside {
  background-color: #ffffff;
  height: 100vh;
  overflow-y: auto;
  border: 1px solid #ccc;
}
.leftAside {
  margin-top: 60px;
}
.leftAside >>> .el-menu {
  background: #ccc;
}
.el-menu-item {
  color: #999;
}
.el-menu-item:hover {
  background-color: #eaf4fb;
}
.leftAside >>> .el-sub-menu__title {
  color: black;
}
.el-menu-item.is-active {
  color: black;
}

.bg-hui {
  background-color: #eee;
  height: 89vh;
}

.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}

.el-image {
  border-bottom: 1px solid #ccc;
}
.common-layout {
  width: 100%;
  height: 90px;
  background-color: #fff;
  border: 1px solid #ccc;
}
.el-main {
  width: 100%;
  height: 600px;
  background-color: #f5f5f5;
}

.el-heade {
  display: flex;
  justify-content: space-between;
}

.tx-img {
  width: 50px;
  height: 50px;
  border-radius: 50px;
}
.title2 {
  margin-left: 20px;
  font-size: 14px;
  color: #ccc;
}
</style>
